<template>
  <div class="container">
    <!-- <div style="display:flex">
      <div class="tabs-ll" :class="currentIndex === 1 ? 'activestyle' : ''" @click="changeIndex(1)">
        <span>待审批</span>
      </div>
      <div class="tabs-lr" :class="currentIndex === 2 ? 'activestyle' : ''" @click="changeIndex(2)">
        <span>已审批</span>
      </div>
    </div>-->
    <el-tabs class="tabs-div" @tab-click="tabsClick">
      <el-tab-pane label="待审批">
        <div class="noData" v-if="tableData.length===0">暂无数据~</div>
        <div v-else>
          <!-- 能力列表 -->
          <div class="table-list">
            <div
              class="sq-card"
              v-for="item in tableData"
              :key="item.jkbh + item.dyrybm"
              @click="clickRow(item)"
            >
              <span>{{ item.jkmc }}</span>
              <span>申请人：{{ item.dyrymc }}</span>
              <span>申请时间：{{ item.dysj }}</span>
              <span :title="item.sqly">申请说明：{{ item.sqly }}</span>

              <div class="shzt">
                <div v-if="item.spzt === '待授权'">
                  <el-button type="primary" @click="sptg(item)">同意</el-button>
                  <el-button type="danger" @click="spth(item)">拒绝</el-button>
                </div>
                <div class="success" v-if="item.spzt === '通过'">审核状态: 通过</div>
                <div class="danger" v-if="item.spzt === '拒绝'">审核状态: 拒绝</div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="page">
            <el-pagination
              background
              @size-change="changePageSize"
              @current-change="changePageNum"
              :current-page="form.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已审批">
        <div class="noData" v-if="tableData.length===0">暂无数据~</div>
        <div v-else>
          <!-- 能力列表 -->
          <div class="table-list">
            <div
              class="sq-card"
              v-for="item in tableData"
              :key="item.jkbh + item.dyrybm"
              @click="clickRow(item)"
            >
              <span>{{ item.jkmc }}</span>
              <span>申请人：{{ item.dyrymc }}</span>
              <span>申请时间：{{ item.dysj }}</span>
              <span :title="item.sqly">申请说明：{{ item.sqly }}</span>

              <div class="shzt">
                <div v-if="item.spzt === '待授权'">
                  <el-button type="primary" @click="sptg(item)">同意</el-button>
                  <el-button type="danger" @click="spth(item)">拒绝</el-button>
                </div>
                <div class="success" v-if="item.spzt === '通过'">审核状态: 通过</div>
                <div class="danger" v-if="item.spzt === '拒绝'">审核状态: 拒绝</div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="page">
            <el-pagination
              background
              @size-change="changePageSize"
              @current-change="changePageNum"
              :current-page="form.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import dyglService from '@/api/dygl'

export default {
  data() {
    return {
      tableData: [],
      form: {
        pageNum: 1,
        pageSize: 10,
        filter: {
          jkmc: '',
          spztList: ['待授权']
        }
      },
      total: 0,
      currentIndex: 1,
    }
  },
  mounted() {
    // 分页
    this.changePageNum(1)
    // 获取授权统计数据
    this.getSqtjsj()
  },
  methods: {
    /*
     * 获取审批列表
     */
    getSpList() {
      const params = { ...this.form }
      dyglService
        .queryWdsq(params)
        .then(res => {
          this.tableData = res.list
          this.total = res.total
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /*
     * 分页
     */
    changePageNum(val) {
      this.form.pageNum = val
      this.getSpList()
    },

    /*
     * 分页
     */
    changePageSize(val) {
      this.form.pageSize = val
      this.form.pageNum = 1
      this.getSpList()
    },

    /*
     * 审批通过
     */
    sptg(row) {
      const params = {
        dyrybm: row.dyrybm,
        jkbh: row.jkbh
      }
      dyglService
        .updateSpzttg(params)
        .then(res => {
          this.$message.success('审批成功')
          this.changePageNum(1)
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /*
     * 审批退回
     */
    spth(row) {
      const params = {
        dyrybm: row.dyrybm,
        jkbh: row.jkbh
      }
      dyglService
        .updateSpztjj(params)
        .then(res => {
          this.$message.success('审批成功')
          this.changePageNum(1)
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /*
     * 跳转能力详情
     */
    clickRow(data) {
      this.$router.push({
        path: '/nlxq',
        query: {
          cs: data.jkbh
        }
      })
    },


    /*
     * 获取授权统计数据
     */
    getSqtjsj() {
      //
    },
    // changeIndex(number) {
    //   this.currentIndex = number;
    //   if (this.currentIndex === 1) {
    //     this.form.filter.spztList = ['待授权']
    //     this.getSpList()
    //   } else {
    //     this.form.filter.spztList = ['通过']
    //     this.getSpList()
    //   }
    // },
    tabsClick(val) {
      if (val.label === '待审批') {
        this.form.filter.spztList = ['待授权']
        this.getSpList()
      } else {
        this.form.filter.spztList = ['通过']
        this.getSpList()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tabs-div {
  background: #fff;
}
.container {
  width: 100%;
  .table-list {
    margin-top: 20px;
  }
  .nl-card {
    width: 100%;
    height: 150px;
    margin-bottom: 20px;
  }
  .page {
    text-align: center;
    width: 100%;
    height: 30px;
    float: left;
  }
  .sq-card {
    width: calc(50% - 10px);
    float: left;
    background: #fff;
    border: solid 1px #cecece;
    padding: 20px;
    position: relative;
    cursor: pointer;
    margin: 0 20px 20px 0;
    &:nth-child(2n) {
      margin-right: 0;
    }
    &:hover {
      box-shadow: 0 2px 12px 0 rgba($color: #000000, $alpha: 0.1);
    }
    span {
      width: 100%;
      line-height: 28px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    span:first-child {
      color: #333333;
      font-size: 20px;
      display: inline-block;
      width: 100%;
      font-weight: bold;
    }
    .shzt {
      // position: absolute;
      // bottom: 20px;
      // right: 20px;
      text-align: right;
    }
  }
}

// 业务css
.tabs-ll {
  height: 50px;
  border-bottom: 1px solid #cecece;
  > span {
    color: #333333;
    font-size: 24px;
    position: relative;
    padding-left: 40px;
    line-height: 48px;
    display: inline-block;
    &:before {
      position: absolute;
      top: 8px;
      left: 0;
      content: url("~@/assets/img/grzx/lb.png");
    }
  }
}

.tabs-lr {
  height: 50px;
  border-bottom: 1px solid #cecece;
  > span {
    color: #333333;
    font-size: 24px;
    position: relative;
    padding-left: 60px;
    line-height: 48px;
    display: inline-block;
    &:before {
      position: absolute;
      top: 8px;
      left: 20px;
      content: url("~@/assets/img/grzx/lb.png");
    }
  }
}

.activestyle {
  border-bottom: 3px solid #115fd4;
}

.noData {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .el-tabs--top .el-tab-pane {
  height: 100%;
  overflow: hidden;
}

::v-deep .el-tabs__content {
  height: calc(100% - 41px);
  padding: 0px 10px 10px;
}
</style>
